<template>
	<view class="g-h5 body-content">
		<u-tabs-swiper ref="tabs" name="cate_name" :list="tabsList" :is-scroll="false" @change="tabsChange"
			:current="tabsCurrent"></u-tabs-swiper>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 800rpx;">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;">
					<view class="menu-middle-view">
						<view class="middle-view-item">
							<view class="book-item-view" v-for="(item,index) in bookshelfList" :key="index">
								<image class="book-image" :src="item.cover" mode=""></image>
								<view class="book-text1">{{item.title}}</view>
								<view class="book-text2">{{item.author}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '在读',
						customIcon: false,
						pagePath: '/pages/miniprogram/index'
									},
					{
						iconPath: 'photo',
						selectedIconPath: 'photo-fill',
						text: '书架',
						customIcon: false,
						pagePath: '/pages/miniprogram/books'
									},
					{
						iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
						selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
						text: '书店',
						customIcon: false,
						pagePath: '/pages/miniprogram/bookshop'
									},
					{
						iconPath: 'play-right',
						selectedIconPath: 'play-right-fill',
						text: '我的',
						customIcon: false,
						pagePath: '/pages/miniprogram/user'
									},
								],
				current: 1,
				tabsList: [{ cate_name: '电子书' }, { cate_name: '有声读物' }],
				swiperCurrent: 0,
				tabsCurrent: 0,
				bookshelfList: []
			}
		},
		onLoad() {
			this.bookshelfList = this.$api.bookshelf()
		},
		methods: {
			tabsChange(index) {
				this.tabsCurrent = index
				this.swiperCurrent = index
			},
			animationfinish(e) {
				let current = e.detail.current
				this.swiperCurrent = current
				this.tabsCurrent = current
			},
			goRead() {
				uni.navigateTo({ url: '/pages/miniprogram/reader?isbuy=' + 1 })
			}
		}
	}
</script>

<style scoped>
	.menu-middle-view {
		width: 100%;
		display: flex;
		background-color: #fff;
	}

	.menu-right-view {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 40rpx 80rpx;
	}

	.right-title {
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.bank-view {
		display: flex;
		flex-direction: column;
	}

	.bank-view-list-sel {
		display: flex;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-view-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-book-id {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bank-book-name {
		margin-left: 30rpx;
	}

	.bank-book-image {
		width: 63rpx;
		height: 84rpx;
		margin: 0 30rpx;
	}

	.bank-books-name-text {
		font-size: 24rpx;
		color: #000;
	}

	.books-see-view {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.see-num-text {
		margin-left: 10rpx;
	}

	.middle-view-item {
		flex: 1;
		border-right: 1rpx solid #F0F0F0;
		display: flex;
		flex-wrap: wrap;
	}

	.book-item-view {
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid #F0F0F0;
		border-right: 1rpx solid #F0F0F0;
		width: 50%;
	}

	.book-image {
		width: 102rpx;
		height: 136rpx;
	}

	.book-text1 {
		width: 102px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
		margin: 14rpx 0 10rpx;
	}

	.book-text2 {
		font-size: 22rpx;
		color: #999;
	}

	.book-title {
		font-size: 32rpx;
	}

	.menu-title-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
	}

	.menu-title-text {
		font-size: 34rpx;
	}

	.menu-item-view {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.view-line {
		margin: 0 10rpx;
		width: 2rpx;
		height: 28rpx;
		background-color: #9E9EB3;
	}

	.userinfo-view {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>